<!DOCTYPE html>
<html>
	<head>
		<title> 事件 </title>
		<meta charset="utf-8" />
		<style>
			.bg{
                background-color:red;
                width: 200px;
                height: 200px;
            }
            .div{
                background-color:red;
                width: 200px;
                height: 200px;
            }
		</style>
	</head>
	<body>
	</body>
    <script>
        //获取id值是特定值的网页元素在js中的表示方法
        var bg = document.getElementById("bg");
        bg.onclick = function(){
            alert("div被点击了");
        }
        //当鼠标移动到div上时，在控制台打印输出
        //鼠标箭头移上了div
        var div = document.getElementById("div");
        div.onmouseover = function(){
            console.log("鼠标箭头移动到了div上");
        }

        var bg = document.getElementById("bg");
        bg.onmouseover = function(){
            console.log("鼠标箭头移动到了bg上");
        }
        bg.onmouseout = function(){
            console.log("鼠标箭头从bg上移开");
        }
    </script>	
</html>